<template>
  <div class="teamMember" v-if="member" @click="toUser">
    <div class="left">
      <div class="avatar">
        <van-image
          width="50"
          height="50"
          lazy-load
          round
          :src="member.userinfo.avatar"
        />
      </div>
      <div class="nameBox">
        <div class="username">{{ member.userinfo.username }}</div>
        <div class="roles">{{ member.role }}</div>
      </div>
    </div>
    <div
      v-if="!isFollow"
      class="follow"
      @click.stop="follow(member.userinfo.id)"
    >
      关注
    </div>
    <div v-else class="unfollow" @click.stop="unfollow(member.userinfo.id)">
      已关注
    </div>
  </div>
</template>

<script>
export default {
  props: ["member"],
  data() {
    return {
      isFollow: false,
    };
  },
  mounted() {
    if (localStorage.getItem("nsMine")) {
      let follows = JSON.parse(localStorage.getItem("follows") || "[]");
      // console.log(follows.indexOf(this.article.author.userinfo.id));
      if (follows.indexOf(this.member.userinfo.id) != -1) {
        this.isFollow = true;
      } else {
        this.isFollow = false;
      }
    }
  },
  activated() {
    if (localStorage.getItem("nsMine")) {
      let follows = JSON.parse(localStorage.getItem("follows") || "[]");
      // console.log(follows.indexOf(this.article.author.userinfo.id));
      if (follows.indexOf(this.member.userinfo.id) != -1) {
        this.isFollow = true;
      } else {
        this.isFollow = false;
      }
    }
  },
  methods: {
    follow(id) {
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        // console.log(id);
        let follows = JSON.parse(localStorage.getItem("follows") || "[]");
        follows.unshift(id);
        localStorage.setItem("follows", JSON.stringify(follows));
        this.isFollow = true;
        this.$toast("关注成功");
      }
    },
    unfollow(id) {
      this.$dialog
        .confirm({
          message: "确定要取消关注TA吗？",
        })
        .then(() => {
          // on confirm
          // console.log(id);
          let follows = JSON.parse(
            localStorage.getItem("follows") || "[]"
          ).filter((o) => o != id);
          localStorage.setItem("follows", JSON.stringify(follows));
          this.isFollow = false;
          this.$toast("取消关注成功");
        })
        .catch(() => {
          // on cancel
        });
    },
    toUser() {
      this.$router.push({
        path: "/user",
        query: { userid: this.member.userinfo.id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.teamMember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  box-shadow: 2px 1px 5px 0px #dbdbdb;
  border-radius: 10px;
  width: 255px;
  margin-right: 20px;

  .left {
    display: flex;
    align-items: center;

    .avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid #f7f7f7;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 8px;
    }

    .nameBox {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 110px;
      margin-right: 20px;

      .username {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .roles {
        font-size: 12px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .follow {
    width: 64px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    font-size: 14px;
    background-color: #fdefe9;
    color: red;
  }

  .unfollow {
    width: 64px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    font-size: 14px;
    background-color: #f7f7f7;
    color: #999;
  }
}
</style>
